<template>
  <div class="member">
    <!-- 版心 -->
    <div class="Library_wrap">
      <!-- 头部 -->
      <div class="header">
        <div class="header_top">
          <el-button size="medium" @click.stop="newBuilt">筛选过期会员</el-button>
        </div>

        <div class="header_bottom">
          <div class="header_left">
            <div class="header_name">
              场馆名称：
              <span>奥德健身蜗牛旗舰店</span>
            </div>
            <el-input v-model="input" placeholder="按年/近三月/本月/日查询"></el-input>

            <div class="header_number">
              预约总数：
              <span>8</span>
            </div>
          </div>

          <div class="header_right">
            <div class="header_ipt">
              <span class="el-icon-search"></span>
              
              <input type="text" placeholder="按会员姓名、手机号查询">
              
              <button>查询</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 头部结束 -->
      <!-- 表格 -->
      <el-table :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="120" :index="indexMethod"></el-table-column>

        <el-table-column prop="name" label="会员姓名" width="180"></el-table-column>

        <el-table-column prop="phone" label="手机号"></el-table-column>

        <el-table-column prop="number" label="预约次数"></el-table-column>

        <el-table-column prop="date" label="注册日期"></el-table-column>

        <el-table-column prop="lose" label="失效日期"></el-table-column>

        <el-table-column prop="status" label="身份"></el-table-column>

      </el-table>
    </div>
      <div class="newBuilt" v-show="addActive">
            <div class="add_owner">
                <div class="add_top">
                    <p>新增会员</p>
                   <span class="el-icon-circle-close" @click.stop="hide"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>会员姓名：</span>
                            <el-input v-model="input" placeholder="请输入姓名"></el-input>
                        </li>
                         <li>
                            <span>手机号：</span>
                            <el-input v-model="input" placeholder="请输入手机号"></el-input>
                        </li>
                        <li>
                            <span>身份：</span>
                           <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
                        </li>
                         <li>
                            <span>注册时间：</span>
                           <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
                        </li>
                           <li>
                            <span>失效日期：</span>
                            <el-input v-model="input" placeholder=""></el-input>
                        </li>
                         <li>
                            <span>场馆地址：</span>
                            <el-input v-model="input" placeholder="请输入场馆地址"></el-input>
                        </li>
                         
                    </ul>
                </div>
                <div class="add_submit">确认添加</div>
            </div>
        </div>
        <!-- 新增会员结束-->
  </div>
</template> 
  

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "魏术超",

          phone: "15135934855",

          number: "3",

          date: "2018-09-10",

          lose: "2018-07-10",

          status: "VIP"
        },
        {
          name: "李四",

          phone: "15135934855",

          number: "4",

          date: "2018-09-12",

          lose: "2018-07-15",

          status: "VIP"
        },
        {
          name: "张三",

          phone: "15135934855",

          number: "5",

          date: "2018-09-15",

          lose: "2018-07-18",

          status: "VIP"
        },
        {
          name: "王五",

          phone: "15135934855",

          number: "3",

          date: "2018-09-18",

          lose: "2018-07-21",

          status: "VIP"
        }
      ],

      options: [
        {
          value: "选项1",

          label: "VIP月卡"
        },
        {
          value: "选项2",

          label: "VIP年卡"
        }
      ],

      value: "",

      input: "",

      addActive: false,

      value1: ""
    };
  },

  methods: {
    indexMethod(index) {
      return index * 1;
    },

    tableRowClassName({
      row,

      rowIndex
    }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }

      return "";
    },

    newBuilt() {
      this.addActive = true;
    },

    hide() {
      this.addActive = false;
    }
  }
};
</script>
<style scoped>
.member {
  width: 100%;

  height: 100%;

  background: #f2f2f2;

  position: absolute;

  left: 250px;

  top: 0;

  z-index: 2;
}

/* 版心 */

.Library_wrap {
  width: 100%;

  height: 100%;

  margin-left: 3%;
}

.Library_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.Library_wrap .header .header_top .el-button--medium:first-child {
  height: 34px;

  background: #2871e9;
  padding:0 15px;
}

.el-button {
  color: #fff;
}

.Library_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.Library_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}
.Library_wrap .header .header_bottom .header_left .el-input{
  width:200px;
  height:33px;
  margin-left:58px;

}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.Library_wrap .header .header_bottom .header_name {
  font-size: 15px;

  color: #000000;
}

.Library_wrap .header .header_bottom .header_name span {
  color: #286fe6;
}

.Library_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 12px;
}

.Library_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}

.Library_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 22%;
}

.Library_wrap .header .header_bottom .header_right .header_ipt {
  height: 30px;

  background: #dfdfdf;

  border-radius: 15px;

  display: flex;

  align-items: center;
}

.Library_wrap .header .header_bottom .header_right .header_ipt span {
  display: inline-block;

  color: #b9b9b9;

  margin-left: 10px;
}

.Library_wrap .header .header_bottom .header_right .header_ipt input {
  border: none;
height:30px;
  outline: none;
  background: #dfdfdf;
}

.Library_wrap .header .header_bottom .header_right .header_ipt button {
  width: 55px;

  height: 26px;
line-height:26px;
     padding: 0 10px;
  border: none;

  border-radius: 15px;

  background: #2e7bfb;

  font-size: 14px;

  color: #ffffff;
}

/* 版心结束 */

/* 表格 */

.el-table {
  width: 80%;

  margin-top: 20px;
}

.el-table tr th {
  text-align: center !important;
}

/* 表格结束 */

/* 添加馆主*/

.newBuilt {
  width: 100%;

  height: 100%;

  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}

.newBuilt .add_owner {
  width: 560px;

  background: #fff;

  margin: 146px auto;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}

.newBuilt .add_owner .add_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}

.newBuilt .add_owner .add_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}

.newBuilt .add_owner .add_top span {
  font-size: 18px;

  display: inline-block;
}

.newBuilt .add_owner .add_bottom {
  width: 100%;
}

.newBuilt .add_owner .add_bottom ul {
  width: 100%;
}

.newBuilt .add_owner .add_bottom ul li {
  width: 94%;

  display: flex;

  align-items: center;

  margin-top: 35px;
}

.newBuilt .add_owner .add_bottom ul li span {
  display: inline-block;

  width: 25%;

  font-size: 16px;

  color: #000000;
}

.newBuilt .add_owner .add_submit {
  width: 52%;

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  text-align: center;

  background: #2f7dfe;

  border-radius: 4px;

  margin-top: 80px;

  font-size: 16px;

  color: #fff;
}

/* 添加馆主结束 */
</style>

